<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="FuncionesUtilitarias.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<h1 class="title">Gestión de Tipos de Novedad</h1>
<hr>
<p class="meta"></p>
<script type="text/javascript">
    /*
     * Según el tipo de novedad escogido (genérica o específica)
     * se muestran los campos correspondientes.
     */

    function muestraCamposNombres(tipo){
        showElementByDisplay('sub2');
        hideElementByDisplay('sub3');
        hideElementByDisplay('sub4');
        hideElementByDisplay('sub5');
        hideElementByDisplay('tabla_campos_viejos');
        hideElementByDisplay('camposTable');
        hideElementByDisplay('subAlertas');
        hideElementByDisplay('alertaTable');
        showElementByDisplay('nextButton');
        hideElementByDisplay('addNovedad');
        if(tipo == 'generica'){
            showElementByDisplay('setNovedadesNamesTable');
            showElementByDisplay('h31');
            hideElementByDisplay('h32');
            hideElementByDisplay('selectNovGen');
            hideElementByDisplay('setNovEspName');
            hideElementByDisplay('setNovEspDes');
            showElementByDisplay('setNovGenName');
            showElementByDisplay('setNovGenDes');
            document.getElementById('nextButton').onclick = Function("checkName('gen')");
        }else{
            showElementByDisplay('setNovedadesNamesTable');
            showElementByDisplay('h32');
            hideElementByDisplay('h31');
            showElementByDisplay('selectNovGen');
            showElementByDisplay('setNovEspName');
            showElementByDisplay('setNovEspDes');
            hideElementByDisplay('setNovGenName');
            hideElementByDisplay('setNovGenDes');
            document.getElementById('nextButton').onclick = Function("checkName('esp')");
        }
        hideElementByDisplay('selectTipoNovedadTable');
        showElementByDisplay('sub2');
        document.getElementById('backButton').onclick = Function("agregarNovedad()");
        showElementByDisplay('obligatorios');
    }

    /*
     * Revisa si el nombre de la novedad a crear ha sido ingresado y
     * continúa a la sección de agregar campos.
     */
    function checkName(tipo){
        hideElementByDisplay('error_nombre');
        hideElementByDisplay('error_select');
        hideElementByDisplay('nombre_alfanum');
        if(tipo == 'gen'){
            if((document.getElementById('nombre_gen').value == null) ||
                (document.getElementById('nombre_gen').value == "")){
                showElementByDisplay('error_nombre');
            }else if(!validarAlfaNum('nombre_gen')){
                showElementByDisplay('nombre_alfanum');
            }else{
                checkExisteNombre(document.getElementById('nombre_gen').value, tipo,-1);
            }
        }else{
            if(document.getElementById('novGenSelected').value == "seleccionar"){
                showElementByDisplay('error_select');
            }else{
                if((document.getElementById('nombre_esp').value == null) ||
                    (document.getElementById('nombre_esp').value == "")){
                    showElementByDisplay('error_nombre');
                }else if(!validarAlfaNum('nombre_esp')){
                    showElementByDisplay('nombre_alfanum');
                }else{
                    checkExisteNombre(document.getElementById('nombre_esp').value, tipo,document.getElementById('novGenSelected').value);
                }
            }
        }
    }

    /*
     * Revisa si el nombre de la novedad a crear ha sido ingresado y
     * continúa a la sección de agregar campos.
     */
    
    function checkExisteNombre(valor, tipo,id_gen){
        $.getJSON("buscarNombreNovedad.do",{nombre: valor,id_gen: id_gen},
        function(data) {
            var ocurrencias = 0;
            $.each(data.nombreNovedades, function(i,item){
                ocurrencias++;
            });
            if(ocurrencias > 0){
                showElementByDisplay("existe_nombre");
            }
            else{
                showAddCampos(tipo,id_gen);
            }
        });
    }

    /*
     * Muestra la sección de agregar campos a la planilla.
     */
    function showAddCampos(tipo,id_gen){
    
        hideElementByDisplay('sub2');
        showElementByDisplay('sub3');
        showElementByDisplay('sub4');
        showElementByDisplay('sub5');
        hideElementByDisplay('h31');
        hideElementByDisplay('h32');
        hideElementByDisplay('error_select');
        hideElementByDisplay('error_nombre');
        hideElementByDisplay('existe_nombre');
        hideElementByDisplay('setNovedadesNamesTable');
        showElementByDisplay('tabla_campos_viejos');
        showElementByDisplay('camposTable');
        showElementByDisplay('subAlertas');
        showElementByDisplay('alertaTable');
        hideElementByDisplay('nextButton');
        showElementByDisplay('addNovedad');
        hideElementByDisplay('error_campos');
        if(tipo == 'gen'){
            document.getElementById('backButton').onclick = Function("muestraCamposNombres('generica')");
        }else{
            $("#tabla_campos_viejos").empty();
            campos_existentes(id_gen);
            document.getElementById('backButton').onclick = Function("muestraCamposNombres('especifica')");
        }
    }
    
    /*
     * Llena la lista de checkboxes con los campos ya existentes
     */
    var numero_campo = 1;
    function campos_existentes(id_gen){
        $.getJSON("muestraCampos.do",{gen: id_gen, esp: "-1"},
        function(data) {
            var row ="<thead><tr><th class='nosort'>Nombre</th><th>Tipo</th><th>Longitud</th><th>Obligatorio</th></tr></thead>";
            $("#tabla_campos_viejos").append(row);
            row = "<tbody>";
            $("#tabla_campos_viejos").append(row);
            $.each(data.fields, function(i,item){
                row = "<tr><td>"+item.nombre_campo+"</td>";
                if(item.validacion_campo == 0){
                    row += "<td>Numérico</td>";
                }else if(item.validacion_campo == 1){
                    row += "<td>Texto</td>";
                }else {
                    row += "<td>Fecha</td>";    
                }
                row += "<td>"+item.longitud+"</td>";
                if(item.obligatorio_campo == true){
                    row += "<td><input type='checkbox' id='obl"+numero_campo+"' name='obligatorios"+numero_campo+"' checked disabled='true' ></td></tr>";
                }
                else{
                    row += "<td><input type='checkbox' id='obl"+numero_campo+"' name='obligatorios"+numero_campo+"' disabled='true' ></td></tr>";
                }
                $("#tabla_campos_viejos").append(row);
                numero_campo++;
            });
            row = "</tbody>";
            $("#tabla_campos_viejos").append(row);
        });
    }

    /*
     * Agrega un nuevo campo a la planilla a crear.
     */
    var counter = 1;
    function nuevoCampo(){
        counter++;
        var row = "<tr id='tr"+counter+"'><td><font color='red'>*&nbsp;</font><input type='text' id='c"+counter+"' name='campos[]' size='35'/></td>"+
            "<td><select id='tipo"+counter+"' name='tipos[]'><option value='2'>Fecha</option><option value='0'>Numérico</option><option value='1'>Texto</option></select></td>"+
            "<td><input type='text' id='l"+counter+"' name='longitud[]' size='10' maxlength='5' /></td>"+
            "<td><input type='checkbox' id='ob"+counter+"' name='obligatorio"+counter+"' >"+
            "<input type='text' id='obligatorio_val_"+counter+"' style='display:none' name='obligatorio[]' value='false'></td>"+        
            "<td id='td"+counter+"'><input type='button' name='addFieldButton' id='addFieldButton"+counter+"' value='+' onclick='nuevoCampo();'/>"+
            "<input type='button' name='removeFieldButton' id='removeFieldButton"+counter+"' value='-' onclick='removerCampo("+counter+");'/></td></tr>";
        $("#camposTable").append(row);
    }
    
    function removerCampo(id){
        if(id>1){
            var tr = "#tr"+id;
            $(tr).remove();   
        }
    }

    function validarCamposAlertas(){
        hideElementByDisplay('error_campos');
        hideElementByDisplay('error_campos_vacios');
        hideElementByDisplay('error_longitud');
        hideElementByDisplay('error_alerta_intervalo');
        hideElementByDisplay('error_alerta_ocurrencias');        
        var hayError = false;
        for(var i = 1; i <= counter; i++){
            if (document.getElementById('tr'+i) != null){
                var field = document.getElementById('c'+i).value;
                if(field.length > 0 && !(validarAlfaNum('c'+i))){
                    showElementByDisplay('error_campos');
                    hayError = true;
                }
                if(field == ""){
                    showElementByDisplay('error_campos_vacios');
                    hayError = true;
                }
                if(validarNumeros('l'+i)){
                    if(document.getElementById('l'+i).value == "0"){
                        showElementByDisplay('error_longitud');    
                        hayError = true;
                    }
                }else{
                    showElementByDisplay('error_longitud');    
                    hayError = true;
                }
                if(document.getElementById('ob'+i).checked){
                    document.getElementById('obligatorio_val_'+i).value = "true";
                }
            }
        }
        
        var alerta = document.getElementById('intervalo_ocurrencias').value
        if(alerta.length > 0 && !(validarNumerosPositivosAlerta('intervalo_ocurrencias')) || alerta == ""){
            showElementByDisplay('error_alerta_intervalo');
            hayError = true;
        }
        alerta = document.getElementById('numero_ocurrencias').value
        if((alerta.length > 0 && !(validarNumerosPositivosAlerta('numero_ocurrencias')))|| alerta == ""){
            showElementByDisplay('error_alerta_ocurrencias');
            hayError = true;
        }
        if(!hayError){
            sendForm('AgregarNovedadForm', 'AgregarNovedad','center');
        }
    }
    
</script>
<center>
    <h2>Agregar Tipo de Novedad</h2>
    <div id="center">
        <html:form action="/AgregarNovedad" styleId="AgregarNovedadForm" onsubmit="return sendForm('AgregarNovedadForm', 'AgregarNovedad','center');">
            <!-- Subtitulo -->
            <br>
            <h2 id="sub2" style="display: none">Datos Básicos:</h2>
            <h2 id="sub3" style="display: none">Agregar Campos:</h2>
            <br>
            <h3 id="h31" style="display: none">Novedad Genérica:</h3>
            <h3 id="h32" style="display: none">Novedad Específica:</h3>
            <!-- Selección de Tipo de Novedad -->
            <table id="selectTipoNovedadTable">
                <tr>
                    <td><h4>Novedad Genérica:</h4></td>
                    <td></td>
                    <td>
                        <input type="radio" name="tipo_novedad" id="tipo_novedad" value="generica" onclick="setNextButtonOnClick('muestraCamposNombres',this.value);">
                    </td>
                </tr>
                <tr>
                    <td><h4>Novedad Específica:</h4></td>
                    <td></td>
                    <td>
                        <input type="radio" name="tipo_novedad" id="tipo_novedad" value="especifica" onclick="setNextButtonOnClick('muestraCamposNombres',this.value);">
                    </td>
                </tr>
            </table>
            <font color="red" id="error_select" style="display: none"><p>Debe seleccionar un Tipo de Novedad Genérica.</p></font>
            <font color="red" id="error_nombre" style="display: none"><p>Debe ingresar un nombre para la novedad.</p></font>
            <font color="red" id="existe_nombre" style="display: none"><p>El nombre de la novedad ingresado ya existe.</p></font>
            <font color="red" id="nombre_alfanum" style="display: none"><p>El nombre sólo puede contener letras y/o números y no puede empezar con espacios.</p></font>
            <table id="setNovedadesNamesTable" style="display: none">
                <!-- Definición de nombres de la novedad a agregar -->
                <tr id="setNovGenName">
                    <td><h4><font color="red">*&nbsp;</font>Nombre:</h4></td>
                    <td><html:text property="nombre_gen" styleId="nombre_gen" size="40"/></td>
                </tr>
                <tr id="setNovGenDes">
                    <td><h4>Descripción:</h4></td>
                    <td><html:textarea property="descr_gen" styleId="descr_gen" rows="15" cols="40"/></td>
                </tr>
                <tr id="selectNovGen">
                    <td id="label1"><h4><font color="red">*&nbsp;</font>Tipo de Novedad Genérica:</h4></td>
                    <td id="dropdown"><select id="novGenSelected" name ="novGenSel" onchange="">
                            <script type="text/javascript">
                                $.getJSON("listaNovedadesGenericas.do",
                                function(data) {
                                    data.namesNG.sort(function(a,b){return ((a.novedad == b.novedad) ? 0 : ((a.novedad > b.novedad) ? 1 : -1 ))});
                                    $.each(data.namesNG, function(i,item){
                                        var string = "<option value='"+item.idNovedad+"'>"+item.novedad+"</option>";
                                        $('#novGenSelected').append(string)
                                    });
                                });
                            </script>
                            <option value="seleccionar">Seleccionar</option>
                        </select>
                    </td>
                </tr>
                <tr id="setNovEspName">
                    <td><h4><font color="red">*&nbsp;</font>Nombre:</h4></td>
                    <td><html:text property="nombre_esp" styleId="nombre_esp" size="40"/></td>
                </tr>
                <tr id="setNovEspDes">
                    <td><h4>Descripción:</h4></td>
                    <td><html:textarea property="descr_esp" styleId="descr_esp" rows="15" cols="40"/></td>
                </tr>
                <br>
            </table>
            <h3 id="sub4" style="display: none">Campos Existentes:</h3>
            <br>
            <!-- Agrega los campos a las planillas -->
            <table cellpadding="0" cellspacing="0" border="0" id ="tabla_campos_viejos" style="display: none" class="sortable">
                <thead>
                    <tr>
                        <th class="nosort">Nombre</th>
                        <th>Tipo</th>
                        <th>Longitud</th>
                        <th>Obligatorio</th>
                    </tr>
                </thead>
            </table>
            <br>
            <h3 id="sub5" style="display: none">Campos Adicionales:</h3>
            <div style="overflow:auto">
                <table cellpadding="0" cellspacing="0" border="0" id="camposTable" style="display: none" class="sortable">
                    <br>
                    <thead>
                        <tr>
                            <th class="nosort">Nombre</th>
                            <th>Tipo</th>
                            <th>Longitud</th>
                            <th>Obligatorio</th>
                            <th>Agregar/Quitar<br>Campo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="tr1">
                            <td><font color="red">*&nbsp;</font><input type="text" id="c1" name="campos[]" size="35"/></td>
                            <td><select id="tipo1" name="tipos[]">
                                    <option value="2">Fecha</option>
                                    <option value="0">Numérico</option>
                                    <option value="1">Texto</option></select>
                            </td>
                            <td>
                                <input type="text" id="l1" name="longitud[]" size="10" maxlength="5" /> 
                            </td>
                            <td><input type="checkbox" id="ob1" name="obligatorio1" ><input type="text" id="obligatorio_val_1" style="display:none" name="obligatorio[]" value="false"></td></td>
                            <td id="td1"><input type="button" name="addFieldButton" id="addFieldButton" value="+" onclick="nuevoCampo();"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <font color="red" id="error_campos" style="display: none"><p>El nombre de los campos sólo puede contener letras y/o números y no puede empezar con espacios.</p></font>
            <font color="red" id="error_campos_vacios" style="display: none"><p>El nombre del campo no puede ser vacio.</p></font>
            <font color="red" id="error_longitud" style="display: none"><p>El valor de la longitud de los campos debe ser un número mayor a cero (0).</p></font>
            <h3 id="subAlertas" style="display: none">Información de Alertas:</h3>
            <table id="alertaTable" style="display: none">
                <tr>
                    <td><h4>Intervalo de ocurrencia en días:</h4></td>
                    <td><font color="red">*&nbsp;</font><html:text property="intervalo_ocurrencias" styleId="intervalo_ocurrencias" size="5" maxlength="5" /></td>
                </tr>
                <tr>
                    <td><h4>Ocurrencias necesarias para activar la alerta:</h4></td>
                    <td><font color="red">*&nbsp;</font><html:text property="numero_ocurrencias" styleId="numero_ocurrencias" size="5" maxlength="5"/></td>
                </tr>
            </table>
            <br>
            <font color="red" id="error_alerta_intervalo" style="display: none"><p>El valor del intervalo de ocurrencias debe ser un número mayor o igual a 0.</p></font>
            <font color="red" id="error_alerta_ocurrencias" style="display: none"><p>El valor las ocurrencias necesarias debe ser un número mayor o igual a 0.</p></font>
            <table>
                <font color="red" id="obligatorios" style="display: none"><p>Los campos que tienen (*) son obligatorios.</p></font>
                <!-- Parte baja de la página -->
                <tr>
                    <td>
                        <input type="button" name="nextButton" id="nextButton" value="Continuar" disabled="true"/>
                    </td>
                    <td>
                        <input type="button" name="addNovedad" id="addNovedad" value="Agregar Novedad"  style="display: none" onclick="validarCamposAlertas();"/>
                    </td>
                    <td>
                        <input type="button" name="backButton" id="backButton" value="Atrás" onclick="novedadesPlanilla();"/>
                    </td>
                </tr>
            </table>
        </html:form>
    </div>
</center>
